<template>
  <div class="home-footer">
    <div class="home-footer_1">
      <img src="../assets/FS_Brand_Logo2.svg" alt="">
    </div>
    <div class="home-footer_2">
      <ul>
        <li>
          <span>简介</span>
        </li>
        <li>
          <router-link to="">关于四季酒店</router-link>
        </li>
        <li>
          <router-link to="">职场资讯</router-link>
        </li>
      </ul>
      <ul>
        <li>
           <span>预定</span>
        </li>
        <li>
          <router-link to="">请求发票</router-link>
        </li>
        <li>
          <router-link to="">联系我们</router-link>
        </li>
        <li>
          <router-link to="">会议与活动</router-link>
        </li>
      </ul>
      <ul>
        <li>
          <span>新闻</span>
        </li>
        <li>
          <router-link to="">新闻发布</router-link>
        </li>
      </ul>
      <ul>
        <li>
          <span>更多</span>
        </li>
        <li>
           <router-link to="">四季的故事</router-link>
        </li>
        <li>
           <router-link to="">非凡体验</router-link>
        </li>
        <li>
           <router-link to="">四季中国</router-link>
        </li>
      </ul>
    </div>
    <div class="home-footer_3">
      <router-link to="/"><img src="../assets/twitter.png" alt=""></router-link>
      <router-link to="/"><img src="../assets/facebook-fill.png" alt=""></router-link>
      <router-link to="/"><img src="../assets/instagram-fill.png" alt=""></router-link>
      <router-link to="/"><img src="../assets/Youtube-fill.png" alt=""></router-link>
      <select  class="select_1" id="group" value="1">
        <option value="1">简体中文</option>
        <option value="2">ENGLISH</option>
        <option value="3">한국어</option>
      </select>
    </div>
    <div class="home-footer_4">
      <router-link to="/">法律公告 •</router-link>
      <router-link to="/">隐私政策 •</router-link>
      <router-link to="/">Cookie 偏好 •</router-link>
      <router-link to="/">无障碍政策</router-link>
      <p>
        <router-link to="/">京ICP备14021657号-1</router-link>
      </p>
    </div>
  </div>
</template>
<style scoped>
  .home-footer{
    width: 100%;
    height: 690px;
    background-color: black;
    overflow: hidden;
  }
  .home-footer_1{
    width: 220px;
    height: 110px;
    margin:0 auto;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .home-footer_2{
    width: 88%;
    height: 200px;
    display: flex;
    flex-wrap: nowrap;
    justify-content:space-around;
    margin: auto;
    margin-bottom: 50px;
  }
  .home-footer_2>ul{
    list-style: none;
  }
  .home-footer_2>ul>li{
    margin: 25px 0;
  }
  .home-footer_2>ul>li>span{
    color: #fff;
    font-size: 1.2rem;
    font-style: italic;
  }
  .home-footer_2>ul>li>a{
    font-size: 0.8rem;
    color: #fff;
    font-weight: bolder;
    letter-spacing: 2px;
    text-decoration: none;
  }
  .home-footer_2>ul>li>a:hover{
    color:gray;
    transition: 0.4s;
  }
  .home-footer_3{
    width: 71%;
    height: 20px;
    border-bottom: 1px solid gray;
    padding-bottom: 20px;
    margin: auto;
  }
  .home-footer_3>img{
    color: #fff;
  }
  .select_1{
    float: right;
    border: 1px solid #fff;
    border-radius: 3px;
    background-color: black;
    color: #fff;
    font-size: 0.8rem;
    padding: 5px;
    letter-spacing: 1px;
  }
  .home-footer_3 a{
    margin-right: 25px;
  }
  .home-footer_3 a>img{
    height: 100%;
  }
  .home-footer_4{
    width: 71%;
    height: 40px;
    margin: auto;
    margin-top: 20px;
  }
  .home-footer_4 a{
    text-decoration: none;
    color: #fff;
    letter-spacing: 1px;
    margin-right: 10px;
    font-size: 0.5rem;
    font-weight: bold;
  }
  .home-footer_4 a:hover{
    color: gray;
    transition: 0.4s;
  }
  .home-footer_4 p{
    margin-top: 8px;
  }
  .home-footer_4 p>a{
    color: gray;
    font-weight: 400;
    text-decoration: underline;
  }
  .home-footer_4 p>a:hover{
    color: #fff;
  }
</style>
